<template>
  <section class="container">
      <!--render chapter-->
      <div v-for="(moduleID, index) in moduleMap.pages">
             <component v-bind:is=getStringName(moduleID) :chartData="getChartData(moduleID)"></component>
      </div>
  </section>
</template>

<script>
import {hIdMapping} from '~/store/hIdMapping'
import axios from 'axios'
let H_HOME_PAGE= () => import('~/components/horizontal/home_page.vue').then(m => m.default) //封面首页
let H_INFO_BASIC = () => import('~/components/horizontal/info_basic.vue').then(m => m.default) // 信息总览-基本信息
let H_INFO_STRUCTURE = () => import('~/components/horizontal/info_structure.vue').then(m => m.default) // 信息总览-建筑分布
let H_INFO_DEPARTMENT = () => import('~/components/horizontal/info_department.vue').then(m => m.default) //信息总览-科室分布
let H_KEYNOTE_DEVICE = () => import('~/components/horizontal/keynote_device.vue').then(m => m.default) // 设备特征-重点设备分析
let H_DEPARTMENT_BRAND = () => import('~/components/horizontal/department_brand.vue').then(m => m.default) //科室多维-品牌分析
let H_DEPARTMENT_CATEGORY = () => import('~/components/horizontal/department_category.vue').then(m => m.default) //科室多维-品类分析
let H_DEPARTMENT_VALUE = () => import('~/components/horizontal/department_value.vue').then(m => m.default) //科室多维-价值分析
let H_WORKER_WORKLOAD = () => import('~/components/horizontal/worker_workload.vue').then(m => m.default) //医工统计-工作量统计
let H_REPAIR_VALUE = () => import('~/components/horizontal/repair_value.vue').then(m => m.default) //维修概况-价值维修
let H_SECONDMENT_CATEGORY = () => import('~/components/horizontal/secondment_category.vue').then(m => m.default) //借调情况-品类借调
let H_SECONDMENT_DEPARTMENT = () => import('~/components/horizontal/secondment_department.vue').then(m => m.default) //借调情况-科室借调
let H_INFO_BRAND = () => import('~/components/horizontal/info_brand.vue').then(m => m.default) //信息总览-品牌分布
let H_REPAIR_BARND = () => import('~/components/horizontal/repair_brand.vue').then(m => m.default) //维修概况-品牌维修
let H_REPAIR_BASIC = () => import('~/components/horizontal/repair_basic.vue').then(m => m.default) //维修概况-基本信息
let H_END_PAGE= () => import('~/components/horizontal/end_page.vue').then(m => m.default) //封面尾页

export default {
  asyncData ({ params, store, query }) {
    // get the mapping (hospital <----> module)
    let encodeID = encodeURI(params.id)
    let soloModuleID
    console.log(encodeID,"hhhh",query)
    if(typeof query.module !== 'undefined'){
      soloModuleID = query.module
    }
    axios.defaults.baseURL = 'http://121.42.252.26/autoreport/select';
//    axios.defaults.baseURL = 'http://121.42.187.170/autoreport/select';
    console.log('baseURL', axios.defaults.baseURL)
    return axios({
      url: '/template/select', // 获取模版的页数
      baseURL: 'http://121.42.252.26', //http://127.0.0.1:4000/mock/template/select
      method: 'get',
      params: {
        tempId: query.template,
        hosId: encodeID
      }
    })
      .then((res) => {
        let moduleMap = res.data.data;
        if(!moduleMap || !moduleMap.pages){
//          console.log('moduleMap',moduleMap)
          console.log("获取到的数据不正常");
          return {moduleMap: {pages:[]}}
        }
        // if no modules return blank array
        if (moduleMap.pages.length === 0) {
          return {moduleMap: {modules:[]}}
        }
        console.log('数据正常，准备获取每个模板的数据')
        let promiseArray
        let chaptersCollection = []  //不需要拉取数据的模块
        //test.......................
        if(soloModuleID){
          moduleMap.pages = [soloModuleID]
          console.log("单独模块测试模式",moduleMap.pages)
        }
        //test.......................

        promiseArray = moduleMap.pages.map((moduleID) => {
          //chapter did not send request
          var hasValue = chaptersCollection.some((value)=>{
                return value === moduleID
          })
          if(!hasValue){
          console.log('hIdMapping',hIdMapping[moduleID], moduleID)
            return store.dispatch(hIdMapping[moduleID], {hospitalID: encodeID, moduleID, style: query.style}) //encodeID, 118882,118930，120129,3622,3362
          }else{
            return false
          }
        })
        promiseArray  = Array.from(new Set(promiseArray));
        return Promise.all(promiseArray).then(function () {
          return {moduleMap}
        })
      })
  },
  validate ({ params, query }) {
    if(!isNaN(query.template) && params.id){
      return true
    }
    console.log("参数验证失败",params.id,query.template)
    console.log("query", query)

    return false

  },
  data(){
    return {
      page:0
    }
  },
  methods:{
    getChartData: function (moduleID) {
//      console.log("moduleID",moduleID)
//      console.log(IdMapping[moduleID],moduleID,"*************")
//      console.log("store状态", this.$store.state[IdMapping[moduleID]])
//      console.log("hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh")

      return this.$store.state[hIdMapping[moduleID]] ? this.$store.state[hIdMapping[moduleID]] : {}
    },
    getStringName: function(id){
      return ''+id
    }
  },
  components:{
    "1":H_HOME_PAGE,
    "2":H_INFO_BASIC,
    "3":H_INFO_STRUCTURE,
    "4": H_INFO_BRAND,
    "5":H_INFO_DEPARTMENT,
    "6":H_DEPARTMENT_BRAND,
    "7":H_DEPARTMENT_CATEGORY,
    "8": H_DEPARTMENT_VALUE,
    "9":H_KEYNOTE_DEVICE,
    "10":H_REPAIR_BASIC,
    "11":H_REPAIR_VALUE,
    "12": H_REPAIR_BARND,
    "13": H_WORKER_WORKLOAD,
    "14": H_SECONDMENT_CATEGORY,
    "15": H_SECONDMENT_DEPARTMENT,
    "16": H_END_PAGE

  },
  mounted(){
    console.log(this.$route.params,"当前医院的id")
  }
}
</script>

<style lang="scss">
@import '../../assets/css/common.scss';

.container{
    background: #fff;
    margin:0 auto;
    align-items: left;
    .page_name{
        justify-content: center;
        height:100px;
        text-align: center;
    }
     >div{
         width: 100%;
     }
}
.clear:after {
    content: '.';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden; }

.left {
    float: left; }

.right {
    float: right; }

.sending-book-text{
    padding: 0 35px;
    margin: 60px auto 0 auto;
}
.paragraph-text{
    text-indent: 2em;
    color: #656666;
    line-height: 1.8em;
    font-size: 14px;
    >b{
        color:#0c122e;
    }
}

.charts_title{
    color: #666;
    font-weight: 400;
    font-size: 14px;
}
</style>
